<template>
  <div class="base-map-root full-container">
    <lark-map
      :class="filletAngleMap ? ['diy-map'] : []"
      v-if="bufferMapConfig"
      :map-config="bufferMapConfig"
      @loaded="load"
      ref="mmap"
    >
    </lark-map>
    <div class="popup-template-root" style="display: none">
      <popup-container :title="popupTitle" @closePopup="closePopup" v-if="reload" ref="popupContainer"
                       :filed-list="dataList"></popup-container>
    </div>
  </div>
</template>

<script>
import mapConfig from "@/data/mapConfig.json";
import {BaseMap} from "@/views/business/baseMap/baseMap";
import PopupContainer from "@/components/PopupContainer/index.vue";
import {isArr} from "@/utils/arrayUtil";

export default {
  components: {
    PopupContainer
  },
  props: {
    mapConfig: {
      type: Object
    },
    // 是否为圆角地图
    filletAngleMap: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bufferMapConfig: _.cloneDeep(mapConfig),
      view: null,
      baseMap: null,
      dataList: [],
      reload: true,
      popupTitle: ''
    }
  },
  methods: {
    load({mapView}) {
      this.view = mapView
      this.baseMap = new BaseMap(this.view, this.getPopupTemplate)
      this.$emit('mapLoaded', this.baseMap)
    },
    getPopupTemplate(dataList, popupTitle) {
      let owner = this
      return new Promise((resolve, reject) => {
        owner.dataList = isArr(dataList) ? dataList : []
        owner.popupTitle = popupTitle ? popupTitle : ''
        owner.reload = false;
        setTimeout(() => {
          owner.reload = true
          owner.$nextTick(() => {
            resolve(owner.$refs.popupContainer.$el)
          })
        }, 10)
      })
    },
    closePopup() {
      this.baseMap.closePopup()
      this.baseMap.removeHighlight()
    }
  },
}
</script>

<style scoped>

</style>
